<template>
  <view class="search-result-list-container">
    <empty-data v-if="isEmpty"></empty-data>
    <!--1. 通过mescroll-body 包裹列表，指定ref为mescrollRef，监听 @init,@down,@up事件循环渲染 -->
    <mescroll-body
      v-else
      ref="mescrollRef"
      @init="mescrollInit"
      @down="downCallback"
      @up="upCallback"
    >
      <block v-for="(item, index) in resultList" :key="index">
        <view class="search-result-item-box"  @click="onItemClick(item)">
          <search-result-item-theme-1
            v-if="!item.pic_list || item.pic_list.length === 0"
            :data="item"
          ></search-result-item-theme-1>
          <search-result-item-theme-2
            v-else-if="item.pic_list.length === 1"
            :data="item"
          ></search-result-item-theme-2>
          <search-result-item-theme-3
            v-else
            :data="item"
          ></search-result-item-theme-3>
        </view>
      </block>
    </mescroll-body>
  </view>
</template>

<script>
// 2.导入对应的mixins
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
import { getSearchResult } from "api/search.js";
export default {
  name: "search-result-list",
  // 3.注册mixins
  mixins: [MescrollMixin],
  props: {
    queryStr: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      // 数据源
      resultList: [],
      // 页数
      page: 1,
      //当页面初次渲染时，不光会回调init方法，还会回调down和up方法，为了避免在首次就通过down和
      // up获取数据，定义了init变量，表示当前是否为首次请求
      isInit: true,
      // mescroll实例
      mescroll: null,
      // 显示空数据
      isEmpty: false,
    };
  },
  // created() {
  //   this.loadSearchResult();
  // },
  mounted() {
    if (!this.isEmpty) {
      this.mescroll = this.$refs.mescrollRef.mescroll;
    }
  },
  methods: {
    // 4，实现三个回调方法
    // 4.1首次加载
    async mescrollInit() {
      await this.loadSearchResult();
      this.isInit = false;
      // 首次加载完成，关闭上拉加载更多的动画
      // endSuccess表示当前数据加载完成，动画关闭
      this.mescroll.endSuccess();
    },
    // 4.2下拉刷新的回调
    async downCallback() {
      if (this.isInit) return;
      this.page = 1;
      await this.loadSearchResult();
      this.mescroll.endSuccess();
    },
    // 4.3上拉加载的回调
    async upCallback() {
      if (this.isInit) return;
      this.page += 1;
      await this.loadSearchResult();
      this.mescroll.endSuccess();
    },
    // 获取搜索数据
    async loadSearchResult() {
      const { data: res } = await getSearchResult({
        q: this.queryStr,
        p: this.page,
      });
      res.list.forEach((item) => {
        item.title = item.title.replace(
          /<em>/g,
          '<em style="color:#f94d2a; margin:0 2px">'
        );
        item.description = item.description.replace(
          /<em>/g,
          '<em style="color:#f94d2a; margin:0 2px">'
        );
      });
      // this.resultList = res.list;
      // 使用下拉刷新、上拉加载的赋值策略
      if (this.page == 1) {
        // 下拉刷新
        this.resultList = res.list;
      } else {
        // 上拉加载
        this.resultList = [...this.resultList, ...res.list];
      }
      if (this.resultList.length === 0) {
        this.isEmpty = true;
      }
    },
    onItemClick(item){
      uni.navigateTo({ url: `/subpkg/pages/blog-detail/blog-detail?author=${item.author}$articleId=${item.id}` })
    }
  },
};
</script>

<style lang="scss" scoped>
.search-result-list-container {
  padding: $uni-spacing-col-lg $uni-spacing-row-lg;
  .search-result-item-box {
    margin-bottom: $uni-spacing-col-big;
  }
}
</style>
